<template>
  <van-tabbar v-model="active" style="margin-top: 5rem;" @change="onChange" active-color="#07c160">
    <van-tabbar-item icon="wap-home" to='/'>跳蚤</van-tabbar-item>
    <van-tabbar-item icon="hot-sale" dot to='/sell'>我要卖</van-tabbar-item>
    <!-- <van-tabbar-item  icon="my-icon" to='/sell'>我要卖</van-tabbar-item> -->
    <!-- <div class="iconfont">&#xe60a;我要卖</div> -->
    <van-tabbar-item icon="comment" info="5" to='/message'>消息</van-tabbar-item>
    <van-tabbar-item icon="user-o" info="20" to='/user'>我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
  import Vue from 'vue';
  import { Tabbar, TabbarItem } from 'vant';

  Vue.use(Tabbar).use(TabbarItem);
  export default{
    name:'BottomTabbar',
    data() {
      return {
        active: 1
      }
    },
    methods: {
      onChange(index) {
        // alert(index)
        // Notify({ type: 'primary', message: index });
        this.active=index
      }
    }
  }
</script>

<style>

</style>
